<template>
  <div class="home">
    <div class="g-box">
      <div class="g-left">
        <img src="../assets/heycat-wbg.svg" class="c-left-logo" />
        <div class="c-left-slogan">黑猫笔记</div>
      </div>
      <div class="g-right">
        <div style="margin-bottom:40px">
          HEYCAT
        </div>
        <div class="c-right">
          邮箱
          <input class="c-right-input" type="text" placeholder="请输入码云账号邮箱" />
        </div>
        <div class="c-right">
          密码
          <input class="c-right-input" type="text" placeholder="请输入码云账号密码" />
        </div>

        <div class="c-login-btn">
          <a
            style="color:#fff;text-decoration:none"
            href="https://gitee.com/oauth/authorize?client_id=d6e02a56f19cfa948abbc3aad49c242b0b5c5815c5ea39f41681772162683df2&redirect_uri=34a2a40a6f2ef8dcef092d55c2401ae799369254bccbce33b56b31a345d75459&response_type=code"
          >
            登录
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

import api from '@/api'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      loading: false
    }
  },
  async mounted() {
    this.loading = true
    const { data, error } = await api.getAccessToken(
      {
        grant_type: 'password',
        username: 'bymmry@gmail.com',
        password: 'pxh5201798',
        client_id: 'd6e02a56f19cfa948abbc3aad49c242b0b5c5815c5ea39f41681772162683df2',
        client_secret: '34a2a40a6f2ef8dcef092d55c2401ae799369254bccbce33b56b31a345d75459',
        scope: 'user_info projects'
      },
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
    )
    error(msg => {
      console.log(msg)
      console.log(999)
      this.loading = false
    })
    console.log(data)
    this.loading = false
  }
}
</script>

<style scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to left, #414345, #232526);
  /* background: #36282b; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
}
.g-box {
  height: calc(650px * 0.618 * 0.9);
  width: 650px;
  display: flex;
}
.g-left {
  width: 50%;
  height: 100%;
  text-align: center;
  background: linear-gradient(to left, #414345, #232526);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.c-left-slogan {
  writing-mode: vertical-rl;
  text-align: center;
  margin-top: 20px;
}

.c-left-logo {
  width: 50px;
}

.g-right {
  width: 50%;
  height: 100%;
  background: #fff;
  font-size: 14px;
}

.g-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
}
.c-right-logo {
  width: 50px;
  margin-bottom: 20px;
}

.c-right {
  position: relative;
  margin-bottom: 20px;
}

.c-right::before {
  position: absolute;
  left: -10px;
  top: 20%;
  height: 60%;
  width: 2px;

  content: '';
  background: #000;
  box-shadow: 10px rgba(0, 0, 0, 1);
}

.c-right::after {
  position: absolute;
  right: -10px;
  top: 20%;
  height: 60%;
  width: 2px;
  border-right: 1px dashed #aaa;

  content: '';
  /* background: #aaa; */
  /* box-shadow: 10px rgba(0, 0, 0, 1); */
}

.c-right-input {
  outline: none;
  border: none;
  font-weight: 300;
  font-size: 14px;
  color: #606266;
  width: 128px;
}

.c-login-btn {
  margin-top: 20px;

  border: 1px solid #000;
  padding: 2px 20px;
  cursor: pointer;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.5);
  background: #000;
  color: #fff;

  transition: all 0.5s;
}
.c-login-btn:hover {
  box-shadow: 0 2px 27px 6px rgba(0, 0, 0, 0.12);

  transform: translateY(-1px);
}
</style>
